import './cms.button.scss';
import {iReactivityApi} from "../../packages/utils/types.base";
import {createClasses} from "../../packages/utils/createClass";

/**
 * 创建CmsButton组件
 * @author  韦胜健
 * @date    2022/2/6 13:12
 */
export function createCmsButton({ type, designComponent, computed }: iReactivityApi) {

  const classes = createClasses(type);

  return designComponent({
    props: {
      mode: { type: String, default: 'light' },         // 按钮类型: dark,light
      size: { type: String, default: 'large' },         // 大小尺寸:large,normal,small
      width: { type: String },                          // 按钮宽度
      arrow: { type: Boolean },                         // 是否带箭头图标
    },
    slots: ['default'],
    setup({ props, slots }: any) {
      const buttonCls = computed(() => [
        'cms-button',
        `cms-button-size-${props.size}`,
        `cms-button-mode-${props.mode}`,
      ].join(' '));
      const styles = computed(() => ({ width: props.width }));
      return () => (
        <button {...classes(buttonCls.value, { style: styles.value })}>
          {slots.default()}
          {props.arrow && <i {...classes('cms-icon plicon-right-arrow')}/>}
        </button>
      );
    },
  });
}
